:root {
    --clr-dark: #070a13;
    --clr-light: #f1f5f9;
    --clr-slate400: #94a3b8;
    --clr-slate600: #475569;
    --clr-slate800: #1e293b;
    --clr-yellow: #ffc200;
    --clr-blue: #4f46e5;
    --clr-shadow: #2c3e50;
    /* yellow rgba(225, 194, 0, 1) */
    /* blue rgba(79, 70, 229, 1) */

    /* sizes */
    --size-xxs : 0.5rem;  /*8px*/
    --size-xs : 0.75rem;  /*12px*/
    --size-s : 0.875rem;  /*14px*/
    --size-base : 1rem;  /*16px*/
    --size-lg : 1.125rem;  /*18px*/
    --size-xl : 1.25rem;  /*20px*/
    --size-2xl : 1.5rem;  /*24px*/ 
    --size-3xl : 2rem;  /*32px*/
    --size-4xl : 2.25rem; /*36px*/ 
    --size-5xl : 3rem; /*48px*/ 
    --size-6xl : 3.75rem;  /*60px*/
    --size-7xl : 4.5rem;  /*72px*/
    --size-8xl : 6rem;  /*96px*/
    --size-9xl : 8rem; /*128px*/
    --size-10xl : 10rem; /*160px*/
}


*, ::before, ::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: calc(1em + 0.5rem);
    scroll-behavior: smooth;
}


.light-mode{
    --clr-light: #070a13;
    --clr-dark: #f1f5f9;
    --clr-slate400: #1e293b;
    --clr-slate600: #1e293b;
    --clr-slate800: #1e293b;
    --clr-shadow: #b0bec5;
}

body {
    font-family: 'General Sans', sans-serif;
    background-color: var(--clr-dark);
    color: var(--clr-light);
}

img,
picture,
video,
svg {
    display: block;
    max-width: 100%;
    user-select: none;
}

button {
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

a {
    color: var(--clr-yellow);
    
}

strong{
    color: var(--clr-blue);
}

/* scrollbar */
body::-webkit-scrollbar {
    width: 8px;
  }
   
  body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  }
   
  body::-webkit-scrollbar-thumb {
    background-color: var(--clr-yellow);
    outline: 1px solid var(--clr-yellow);
  }